<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>历史订单</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <!-- UC应用模式 --> <meta name="browsermode" content="application"> 
    <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app">

    <!-- 引入组件库 -->
     <link rel="stylesheet" href="../css/common/reset.css">
     <link rel="stylesheet" href="../css/common/layer.css">
     <link rel="stylesheet" href="../css/app/history-order.css">
    <script src="../js/common/flexible.js"></script>
    <script src="../js/common/jquery.min.js"></script>
    <script src="../js/common/Storage.js"></script>
      <script src="../js/common/tool.js"></script>
    <script src="../js/common/vue.js"></script>
    <script src="../js/common/config.js"></script>
    <script src="../js/common/layer.js"></script>

  </head>
  <body>
  <div id="app">
  <div class="history-order">
      <div class="top">
          <p :class='{bghui:order_type==null}' @click="order_type=null">全部</p><span></span>
          <p :class='{bghui:order_type==5}' @click="order_type=5">待支付</p><span></span>
          <p :class='{bghui:order_type==1}' @click="order_type=1">待入住</p><span></span>
          <p :class='{bghui:order_type==2}' @click="order_type=2">已完成</p><span></span>
          <p :class='{bghui:order_type==3}' @click="order_type=3">已取消</p>
      </div>
      <div class="cont">
        <div v-for="(item,index) in hisOrder">
        <div class="flex-div">
          <div class="cont-every">
              <div class="cont-every-top"  @click="go_current(item.id)">
                  <div class="cont-every-top-left" >
                    <p>订单号：{{item.reserveNo}}</p>
                    <p>{{item.hotelName}}-{{item.roomTypeName}}-{{item.roomsNum}}间</p>
                    <p>{{item.inTime}}至{{item.outTime}}</p>
                  </div>
                  <div class="cont-every-top-right">
                    <p v-if="item.reserveStatus==5">预订未付</p>
                    <p v-if="item.reserveStatus==1">待入住</p>
                    <p v-if="item.reserveStatus==2">已完成</p>
                    <p v-if="item.reserveStatus==3">已取消</p>
                    <p >共{{item.dayCount}}晚</p>
                  </div>
              </div>
              <div class="cont-every-bottom">
                  <p style="color: red;">￥{{item.totalPrice}}</p>
                  <p v-if="item.reserveStatus==5"><span @click="cancel(item.id)">取消</span>  <span style="background-color: #FFCC00;" @click="go_order(item.id)">支付</span> </p>
              </div>
              <div class="solid">
              </div>
          </div>


        </div>

<!--         <div class="flex-div">
          <div class="cont-every">
              <div class="cont-every-top">
                  <div class="cont-every-top-left">
                    <p>订单号：152464684512</p>
                    <p>寓居九都汇店-商务大床房-1间</p>
                    <p>06月15日-06月16日</p>
                  </div>
                  <div class="cont-every-top-right">
                    <p>预定未付</p>
                    <p>共1晚</p>
                  </div>
              </div>
              <div class="cont-every-bottom">
                  <p>￥599</p>
                  <p><span>取消</span>  <span>支付</span> </p>
              </div>
              <div class="solid">
              </div>
          </div>
        </div> -->

      </div>
      </div>
  </div> 
 


  </div>

 <script src="../js/app/history-order.js"></script>
 <script type="text/javascript">

      
</script>

 
  </body>


</html>
